<!-- 录用公示 -->
<template>
    <div>
        <Dialog v-model="dialogVisible1" title="录用公示" >
            <div class="message_p">
                <el-form ref="ruleFormRef" :model="state.form" :rules="rules" label-width="120px" label-position="top">
                    <el-form-item label="公示标题" prop="announcementTitle">
                        <el-input v-model="state.form.announcementTitle" placeholder="请输入公示标题" />
                    </el-form-item>
                    <el-form-item label="公示内容" prop="announcementContents">
                        <el-input v-model="state.form.announcementContents" :autosize="{ minRows: 2}"  type="textarea" placeholder="公示内容" />
                    </el-form-item>
                    <el-form-item label="录用人数">
                        <el-input v-model="state.form.number" placeholder="录用人数" disabled />
                    </el-form-item>
                    <el-form-item label="录用详情">
                        <el-table :data="state.form.arraysIds" style="width: 100%;margin-top: 16px;"
                            :headerCellStyle="headerCellStyle" :rowStyle="rowStyle" height="200">
                            <el-table-column prop="fullName" label="姓名" />
                            <el-table-column prop="positionName" label="岗位名称" />
                            <el-table-column prop="idNumber" label="身份证号" />
                        </el-table>
                    </el-form-item>
                    <div class="flex jcfe aic" style="width: 100%;">
                        <el-button @click="DialogClose">取消</el-button>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    </div>
                </el-form>
            </div>
        </Dialog>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive, watch } from 'vue'
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
const dialogVisible1 = ref(false)
const loading = ref(false)
const emit = defineEmits(['PublicityClick'])
const props = defineProps({
    PublicityData: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
watch(() => props.PublicityData, (newValue: any) => {
    console.log("公示公告", newValue);
    let arr = [] as any
    newValue.arraysIds.forEach(element => {
        let obj = {
            fullName: element.resumeVo.personalInformation.fullName,
            idNumber: element.resumeVo.personalInformation.idNumber,
            positionName: element.resumeVo.personalInformation.currentPosition
        }
        arr.push(obj)
    })
    state.form.arraysIds = arr
    state.form.number = newValue.number
}, { deep: true })
// 表格头部信息
const headerCellStyle: any = {
    "background": "#F2F6FC",
    "height": "48px"
}
// 
const rowStyle: any = {
    "height": "48px"
}
interface RuleForm {
    announcementTitle: string
    announcementContents: string
    notice: string
    notices:string
}
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
    announcementTitle: [{ required: true, message: '请填写标题', trigger: 'blur' }],
    announcementContents: [{ required: true, message: '请填写公示内容', trigger: 'blur' }],
    notice: [{ required: true, message: '请填写备注', trigger: 'blur' }],
})
const state = reactive({
    form: {} as any,
})
const DialogOpen = () => {
    dialogVisible1.value = true
}
const DialogClose = () => {
    dialogVisible1.value = false
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            emit('PublicityClick', state.form)
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 暴露方法
defineExpose({
    DialogOpen,
    DialogClose
})
</script>
<style lang="less">
.el-dialog__header {
    padding: 10px;
    border-bottom: 1px solid #D8D8D8;
}

.el-dialog__body {
    padding: 20px;
}
</style>
<style lang="less" scoped>
.message_p {
    padding: 0px 10px 20px 10px;
}

.el-button {
    margin-top: 20px;
    width: 134px;
    height: 40px;
}
</style>